<template>
  <view class="shop-home">
    <!-- 上 -->
    <view class="shop-home-top">
      <searchBarHeader @search="searchQuery"></searchBarHeader>
    </view>
    <!-- 中 -->
    <view class="shop-home-middle">
      <!-- 轮播图 -->
      <uni-swiper-dot :info="swiperInfo" :current="currentState" field="content" mode="round">
        <swiper class="swiper-box" :autoplay="true" @change="handleOneChange">
          <swiper-item v-for="(item,index) in swiperInfo" :key="index">
            <view class="swiper-item">
              <image :src="item.imgUrl" mode="aspectFill" style="width: 100%;"></image>
            </view>
          </swiper-item>
        </swiper>
      </uni-swiper-dot>
    </view>
    <!-- 下 -->
    <view class="shop-home-bottom">
      <view class="bottom-one flex-row-spa margT10" >
        <view v-for="(item,index) in sloganData" :key="index">
          <uni-icons size="20" type="checkbox" color="#FF2442"></uni-icons>
          <text>{{item.text}}</text>
        </view>
      </view>
      <view class="bottom-two">
        <text>--优选促销抢购--</text>
      </view>
      <view class="bottom-three">
        <uni-row class="demo-uni-row">
          <uni-col :span="8">
            <image class="icons-img-radius" src="/static/images/apply-img/好评.png" mode="aspectFill"></image>
          </uni-col>
          <uni-col :span="8">
            <image class="icons-img-radius" src="/static/images/apply-img/好评.png" mode="aspectFill"></image>
          </uni-col>
          <uni-col :span="8">
            <image class="icons-img-radius" src="/static/images/apply-img/好评.png" mode="aspectFill"></image>
          </uni-col>
          
          <uni-col :span="8">
            <image class="icons-img-radius" src="/static/images/apply-img/好评.png" mode="aspectFill"></image>
          </uni-col>
          <uni-col :span="8">
            <image class="icons-img-radius" src="/static/images/apply-img/好评.png" mode="aspectFill"></image>
          </uni-col>
        </uni-row>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref } from 'vue';
  import searchBarHeader from "/components/search-bar-header/search-bar-header.vue"

  // 上 -- 搜索
  const queryValue = ref('')
  const searchQuery = (val)=>{
    console.log('--qqqq->',val);
  }
  
  // 中 -- 轮播图 
  const swiperInfo = ref([
    { content: 'aaa',imgUrl: '/static/images/apply-img/好评选择.png' },
    { content: 'bbb',imgUrl: '/static/images/apply-img/好评.png' },
    { content: 'ccc',imgUrl: '/static/images/apply-img/好评选择.png' }
  ])
  const currentState = ref(0)  // 当前图
  const handleOneChange = (e)=>{
    currentState.value = e.detail.current
  }
  
  // 下
  const sloganData = ref([
    { text: '自营正品促销' },{ text: '物流自提' },{ text: '清仓无售后' }
  ])
  
  
</script>

<style lang="scss">
.shop-home {
  width: 100%;
  .bottom-one {
    color: #5d5b5b;
  }
  .bottom-two {
    text-align: center;
    margin-top: 10px;
  }
  .bottom-three{
    width: 100%;
    padding-left: 30px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    .icons-img-radius{
      width: 160rpx;
      height: 160rpx;
      border-radius: 50%;
    }
  }
} 
</style>
